<template>
    <div>
        
        <el-form label-width="80px" :rules="rules" ref="ruleFormRef" :model="model">
            <el-form-item label="账号" prop="account">
                <el-input  v-model="model.account"  disabled />
            </el-form-item>
            <el-form-item label="权限" prop="purview">
                <el-select v-if="model.flag" v-model="model.purview" placeholder="选择你的捍卫者">
        <el-option label="医生" value="医生" />
        <el-option label="护士" value="护士" />
        <el-option label="医务管理员" value="医务管理员" />
        <el-option label="实习助理" value="实习助理" />
        <el-option label="药房" value="药房" />
      </el-select>
                <el-input v-else v-model="model.purview" disabled/>
            </el-form-item>
            <el-form-item label="账号密码" prop="password">
                <el-input v-if="model.flag" v-model="model.password" />
                <el-input v-else v-model="model.password" disabled/>
            </el-form-item>
            <el-form-item label="身份证号" prop="idcard">
                
                <el-input  v-model="model.idcard" disabled/>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-if="model.flag" v-model="model.phone" />
                <el-input v-else v-model="model.phone" disabled/>

            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-input  v-model="model.sex" disabled/>
            </el-form-item>
            <el-form-item label=" ">
            <el-upload
                action="http://129.211.169.131:21005/users/uploadheader"
                :on-success="handleImgSuccess"
                :show-file-list=false
            >
               
                <img v-if="model.headurl" :src="model.headurl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
        </el-form-item>
            <el-form-item >
                <el-button v-if="!model.flag" @click="quit" type="primary">确定</el-button>
                <el-button v-if="model.flag"  @click="submit(ruleFormRef)" type="primary">确认编辑</el-button>
                <el-button v-if="model.flag"  @click="quit" type="info">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
//表单数据
const props = defineProps({
    defaultModel: {
        type: Object,
        default: () => ({})
    }
})

//表单验证规则
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    
  phone: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
  ],
  purview: [
    {
      required: true,
      message: '请选择权限',
      trigger: 'change',
    },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 3, max: 16, message: '三到十六个字', trigger: 'blur' },
  ],
})

console.log(props.defaultModel);

const model = reactive({
    name: '',
    phone:'',
    purview:'',
    sex:'',
    account:'',
    imgs:'',
    password:'',
    idcard:'',
    headurl:'',
    flag:false,
    id:1,
    head:''

})
const emits = defineEmits(['success'])

const handleImgSuccess=res=>{
    console.log(res);
    
    model.headurl=res.header_url;
    model.head=res.header
}

//提交表单
const submit = async (formEl: FormInstance | undefined) => {

    if (!formEl) return
    
    await formEl.validate(async (valid, fields) => {
    if  (valid) {
        emits('success', model)
    console.log(model);
    }else{
        ElMessage({
        message:'数据不对！！！',
        type:'error'
    })
    }
})
    
    
}

const quit=()=>{
    emits('success', 'close')
}


//监听表格发生变化
watch(()=>props.defaultModel,()=>{
    for(const key in model){
        model[key]=props.defaultModel[key]
    }
},{deep:true})
</script>

<style lang="scss" scoped>
    .avatar{
        width: 120px;
        border-radius: 10px;
    }
    .avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}


</style>